<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Card style="height:800px">
    <Card>
      <header>
        <Row>
          <span>产品:</span>
          <Select v-model="listQueryCondition.productCode" placeholder="产品" style="width:150px">
            <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{item.productTypeName }}</Option>
          </Select>
          <span style="width: 150px;margin-left: 15px;">申请日期(起):</span>
          <DatePicker type="date" placeholder="申请日期(起)" style="width: 150px" v-model="listQueryCondition.applyBeginDate" value="yyyy-MM-dd"></DatePicker>
          <span>-</span>
          <span>申请日期(止):</span>
          <DatePicker type="date" placeholder="申请日期(止)" style="width: 150px" v-model="listQueryCondition.applyEndDate" value="yyyy-MM-dd"></DatePicker>
          <span style="width: 150px;margin-left: 15px;">渠道大类:</span>
          <Select placeholder="渠道大类" v-model="listQueryCondition.patternCode" @on-change="patternChange" style="width:150px">
            <Option v-for="item in patternList" :value="item.patternCode" :key="item.patternCode">{{ item.patternName }}</Option>
          </Select>
          <span style="width: 150px;margin-left: 15px;">渠道:</span>
          <Select v-model="listQueryCondition.channelType" placeholder="渠道" style="width:150px">
            <Option v-for="item in channelList" :value=" item.channelCode" :key=" item.channelCode">{{ item.channelName}}</Option>
          </Select>
          <span style="width: 150px;margin-left: 15px;">姓名:</span>
          <Input v-model="listQueryCondition.custName" placeholder="姓名" style="width:150px" />
          <span style="width: 150px;margin-left: 15px;">付款状态:</span>
          <Select v-model="listQueryCondition.paymentStatus" placeholder="付款状态" style="width:130px">
            <Option v-for="item in paymentStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Row>
        <Row style="margin-top: 15px">
          <span>资金方:</span>
          <Select v-model="listQueryCondition.fundSourceCode" placeholder="资金方" style="width:135px">
            <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName}}</Option>
          </Select>
          <span style="width: 150px;margin-left: 15px;">面签日期(起):</span>
          <DatePicker type="date" placeholder="面签日期(起)" style="width: 150px" v-model="listQueryCondition.faceSignBeginDate" value="yyyy-MM-dd"></DatePicker>
          <span>-</span>
          <span>面签日期(止):</span>
          <DatePicker type="date" placeholder="面签日期(止)" style="width: 150px" v-model="listQueryCondition.faceSignEndDate" value="yyyy-MM-dd"></DatePicker>
          <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
        </Row>
      </header>
    </Card>

    <Card>
      <Row type="flex" justify="center" align="middle" class="list-query">
        <Table border ref="selection" :columns="listInfoColumns" :data="listInfoData" style="width: 100%;" @on-selection-change="handleRowChange"></Table>
      </Row>
      <div style="margin-top: 36px;text-align: center;">
        <Form action="" method="get" name="exportDataBath" id="exportDataBath" enctype="multipart/form-data">
          <Input v-model="loanIds" name="loanIds" :element-id="loanIds" style="display:none" />
          <Button type="primary" @click="downLoadBatch">批量下载</Button>
          <Button type="primary" @click="modal1 = true" style="margin-left: 20px;">下载清单</Button>
        </Form>
      </div>
      <div style="margin-top: 36px;text-align: center;">
        <Page :total="listQueryCondition.total" :current="listQueryCondition.pageNum" :page-size="listQueryCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
      </div>
    </Card>
    <Modal v-model="modal1" title="下载条件设置" @on-ok="ok" @on-cancel="cancel" :scrollable="true">
      <Form ref="downForm" :model="listDownCondition" :rules="dataRules">
        <div class="list-query-popup-div">
          <div class="list-query-font-div">资金方：</div>
          <FormItem prop="fundSource">
            <Select v-model="listDownCondition.fundSource" class="v-select-wrapper" placeholder="资金方" >
              <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName }}</Option>
            </Select>
          </FormItem>

        </div>
        <div class="list-query-popup-div">
          <div class="list-query-font-div"> 产品:</div>
          <div>
            <Select v-model="listDownCondition.productId" class="v-select-wrapper" placeholder="产品">
              <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName}}</Option>
            </Select>
          </div>
        </div>
        <div class="list-query-popup-div">
          <div class="list-query-font-div">渠道大类:</div>
          <Select class="v-select-wrapper" placeholder="渠道大类" v-model="listDownCondition.patternCode" @on-change="patternChange">
            <Option v-for="item in patternList" :value="item.patternCode" :key="item.patternCode">{{ item.patternName }}</Option>
          </Select>
        </div>

        <div class="list-query-popup-div">
          <div class="list-query-font-div">渠道:</div>
          <div>
            <Select v-model="listDownCondition.channelType" class="v-select-wrapper" placeholder="渠道">
              <Option v-for="item in channelList" :value="item.channelCode" :key="item.channelCode">{{ item.channelName }}</Option>
            </Select>
          </div>
        </div>

        <FormItem prop="contractAccount" class="list-query-popup-div">
          <div class="list-query-font-div"> 合同金额:</div>
          <Input v-model="listDownCondition.contractAccount" style="width: 150px" />
        </FormItem>

        <div style="margin-top:30px">
          <div class="inner-list-query-font-div"> 入池时间:</div>
          <Col class="list-query-left-div">
          <DatePicker type="date" placeholder="入池日期(起)" style="width: 150px" v-model="listDownCondition.innerPoolBeginDate" value="yyyy-MM-dd"></DatePicker>
          </Col>
          <Col class="list-query-i-icon"> -
          </Col>
          <Col class="list-query-i-icon">
          <DatePicker type="date" placeholder="入池日期(止)" style="width: 150px" v-model="listDownCondition.innerPoolEndDate" value="yyyy-MM-dd"></DatePicker>
          </Col>
        </div>
      </Form>
    </Modal>

    <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
      <Input v-model="loanIdsList" name="loanIdsList" :element-id="loanIdsList" style="display:none" />
      <Modal v-model="modal2" title="温馨提示" @on-ok="okModal2" @on-cancel="cancel">
        <p>满足条件的合计
          <span style="color:red">{{totalCount}}</span>条任务,累计金额
          <span style="color:red">{{totalMoney}}</span>元;</p>
      </Modal>
    </Form>
  </Card>

</template>

<script>
const validateContractAccount = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value) && value != null && value !== '') {
    callback(new Error('请输入正确的合同金额'))
  } else {
    callback()
  }
}
export default {

  data () {
    return {
      i: 0,
      j: 0,
      // sysUser: {},
      modal1: false,
      modal2: false,
      totalCount: 0,
      totalMoney: 0,
      loanIds: '',
      loanIdsList: '',
      $ajax: null,
      dataRules: {
        fundSource: [
          { required: true, message: '资金源不能为空', trigger: 'blur' }
        ],
        contractAccount: [
          {
            validator: validateContractAccount,
            trigger: 'blur'
          }
        ]
      },
      listQueryCondition: {
        loanId: '',
        productCode: '',
        channelType: '',
        fundSourceCode: '',
        patternCode: '',
        paymentStatus: '',
        custName: '',
        applyBeginDate: '',
        applyEndDate: '',
        faceSignBeginDate: '',
        faceSignEndDate: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },

      listDownCondition: {
        productId: '',
        channelType: '',
        patternCode: '',
        fundSource: '',
        contractAccount: '',
        innerPoolBeginDate: '',
        innerPoolEndDate: ''
      },
      productList: [],
      channelList: [],
      patternList: [],
      fundList: [],
      paymentStatusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: 'P05',
          label: '待放款'
        },
        {
          value: 'D01',
          label: '已放款'
        },
        {
          value: 'F01',
          label: '放款中'
        },
        {
          value: 'F10',
          label: '取消放款'
        },
        {
          value: 'F03',
          label: 'F03'
        }
      ],

      listInfoColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'custIdNumber'
        },
        {
          title: '贷款金额',
          key: 'loanAmount',
          align: 'center'
        },
        {
          title: '产品',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '贷款期限',
          key: 'loanTerm',
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'applyDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applyDate))
            ])
          }
        },
        {
          title: '面签通过时间',
          key: 'faceSignDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.faceSignDate))
            ])
          }
        },
        {
          title: '渠道',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundSourceName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            // console.log('----------------', this.sysUser.positionCode)
            if (params.row.showApproval) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/resignContract', params.row.loanId).then(re => {
                        var data = re.data
                        var message = data.message
                        this.$Message.warning(message)
                      }).catch(er => {
                      })
                    }
                  }
                }, '重签'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/cancelConfirm', params.row.loanId).then(re => {
                        var data = re.data
                        var message = data.message
                        this.$Message.warning(message)
                      }).catch(er => {
                      })
                    }
                  }
                }, '确定取消放款'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/cancelRevoke', params.row.loanId).then(re => {
                        var data = re.data
                        var message = data.message
                        this.$Message.warning(message)
                      }).catch(er => {
                      })
                    }
                  }
                }, '撤销取消放款')
              ])
            } else if (params.row.showApply) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/resignContract', params.row.loanId).then(re => {
                        var data = re.data
                        var message = data.message
                        this.$Message.warning(message)
                      }).catch(er => {
                      })
                    }
                  }
                }, '重签'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/cancelApply', params.row.loanId).then(re => {
                        var data = re.data
                        var message = data.message
                        this.$Message.warning(message)
                      }).catch(er => {
                      })
                    }
                  }
                }, '申请取消放款')
              ])
            } else {
              return h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/resignContract', params.row.loanId).then(re => {
                      var data = re.data
                      var message = data.message
                      this.$Message.warning(message)
                    }).catch(er => {
                    })
                  }
                }
              }, '重签')
            }
          }
        }
      ],
      listInfoData: [],
      model1: '',
      model2: '',
      model3: '',
      model4: ''

    }
  },

  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  initcqclick () {
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.screenConditon()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate())
    vm.listQueryCondition.faceSignEndDate = tmpEndDate
    tmpDate.setMonth(tmpDate.getMonth() - 1)
    vm.listQueryCondition.faceSignBeginDate = tmpDate
  },

  methods: {
    downLoadBatch () {
      if (this.loanIds === '') {
        this.$Message.warning('请选择需要下载的选项')
        return
      }
      document.getElementById('exportDataBath').action = this.$appContext.marvels_core_approve + 'approve/loanList/service/downLoadBatch'
      document.getElementById('exportDataBath').submit()
    },

    downListBatch () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_approve + 'approve/loanList/service/downList'
      document.getElementById('exportList').submit()
    },
    // 返回选择的选择器
    handleRowChange (selection) {
      this.loanIds = ''
      this.i = 0
      for (; this.i < selection.length; this.i = this.i + 1) {
        this.loanIds = selection[this.i].loanId + ',' + this.loanIds
      }
    },
    ok () {
      // 下载
      this.downListDetail()
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    okModal2 () {
      // 下载
      if (this.totalCount < 1) {
        this.$Message.warning('没有可下载任务')
        return
      }
      this.downListBatch()
    },
    // 查询
    listQuery () {
      var vm = this
      var faceSignBeginDate = this.listQueryCondition.faceSignBeginDate
      var faceSignEndDate = this.listQueryCondition.faceSignEndDate
      var custName = this.listQueryCondition.custName
      if (custName === '') {
        if (faceSignBeginDate === '' && faceSignEndDate === '') {
          // 对第二个密码框单独验证
          this.$Message.warning('姓名或面签日期至少选择一项')
          return
        }
      }
      if ((faceSignBeginDate !== '' && faceSignEndDate === '') || (faceSignBeginDate === '' && faceSignEndDate !== '')) {
        this.$Message.warning('面签起始和终止日志必须同时为非空或者空')
        return
      }
      if (faceSignBeginDate !== '' && faceSignEndDate !== '') {
        if (faceSignBeginDate > faceSignEndDate) {
          this.$Message.warning('起始时间不能大于终止时间')
        }
        var tmpDate = new Date()
        tmpDate.setMonth(faceSignBeginDate.getMonth() + 1)
        if (faceSignEndDate > tmpDate) {
          this.$Message.warning('面签时间间隔请控制在一个月之内')
          return
        }
      }
      if (vm.listQueryCondition.paymentStatus === '' || vm.listQueryCondition.paymentStatus === null) {
        vm.listQueryCondition.paymentStatus = 'P05'
      }
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/listQuery', this.listQueryCondition).then(re => {
        var data = re.data
        // console.log(data)
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.listInfoData = data.data.list
        // console.log(vm.listInfoData)
        vm.listQueryCondition.total = data.data.total
      }).catch(er => {

      })
      // this.getSysUser()
      // this.initNodeCode()
    },
    // getSysUser () {
    //   var vm = this
    //   this.$ajax.post(this.$appContext.marvels_core_system + 'system/pmsn/service/loginedUser').then(re => {
    //     var datas = re.data
    //     vm.sysUser = datas.data
    //     // console.log(vm.sysUser)
    //   }).catch(er => {
    //   })
    // },
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/listScreenCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.patternList.push({ patternCode: '', patternName: '请选择' })
        for (var patternLength = 0; patternLength < data.data.channelList.patternList.length; patternLength++) {
          vm.patternList.push(data.data.channelList.patternList[patternLength])
        }
        vm.fundList.push({ fundCode: '', fundName: '请选择' })
        var fundLength = 0
        for (; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({ productType: '', productTypeName: '请选择' })
        var productLength = 0
        for (; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
      }).catch(er => {

      })
    },
    // 批量下载前判断可下载的金额条数等
    downListDetail () {
      this.$refs.downForm.validate(valid => {
        if (valid) {
          this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/downListDetail', this.listDownCondition).then(re => {
            var data = re.data
            var code = data.code
            var message = data.message
            if (code !== 'success') {
              this.$Message.warning(message)
              return
            }
            this.modal2 = true
            this.totalCount = data.data.totalCount
            this.totalMoney = data.data.totalMoney
            this.loanIdsList = data.data.loanIds
          }).catch(er => {

          })
        } else {
          this.$Message.warning('请填充相应条件')
        }
      })
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.listQueryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.listQueryCondition.pageSize = pageLength
      vm.listQuery()
    },
    patternChange (value) {
      var vm = this
      vm.j = 0
      for (vm.j; vm.j < vm.patternList.length; vm.j++) {
        if (vm.patternList[vm.j].patternCode === value) {
          vm.channelList = vm.patternList[vm.j].patternList
        }
      }
    }
  }

}
</script>

<style>
.list-query-popup-div {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}

.list-query-top-div {
  margin-top: 10px;
}

.list-query-left-div {
  width: 150px;
  float: left;
}

.list-query-left-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.list-query-i-icon {
  float: left;
  margin-left: 20px;
}

.list-query-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}

.inner-list-query-font-div {
  height: 30px;
  float: left;
  margin-left: 13%;
  text-align: center;
}
</style>
